<%@ include file="../common/includeTop.jsp"%>
<style>
    .okTips{color: green;}
    .errorTips{color: red;}
</style>
<%--检查用户名是否可用--%>
<script>
    
    function checkRepeated() {
        var Psd = document.getElementById("Psd").value;
        var RepPsd = document.getElementById("repPsd").value;
        var TipsRep = document.getElementById("tipsRepPsd");

        if(Psd === RepPsd)
        {
            TipsRep.className = 'okTips'
            TipsRep.innerText = "Password same";
        }
        else
        {
            TipsRep.className = 'errorTips'
            TipsRep.innerText = "Password must same";
        }


    }
    
    var xhr;
    function checkUsername(){

        var username = document.getElementById("username").value;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = fun1;
        xhr.open("GET","usernameExist?username=" + username,true);
        xhr.send(null);
    }

    function fun1(){
        if(xhr.readyState === 4){
            if(xhr.status === 200){
                var tips = document.getElementById("usernameTips");
                var responseInfo = xhr.responseText;
                console.log("dui ying de xiao xi wei"+responseInfo);
                if(responseInfo === 'Exist'){
                    console.log("already exist");
                    tips.className = 'errorTips'
                    tips.innerText = "Invalid";
                }
                else if(responseInfo === 'Not Exist')
                {
                    console.log("don't exist");
                    tips.className = 'okTips'
                    tips.innerText = "Available";
                }
            }
        }
    }
</script>
<div id="Content">
    <ul class="messages">
        <li>${sessionScope.messageRegister}</li>
    </ul>
</div>
<link rel="stylesheet" href="http://i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css"/>
<div id="Catalog" class="ui-form ui-border-t">
    <form action="Register" method="post" autocomplete="off">
        <h4>User Information</h4>
        <div style="text-align: center;line-height: normal" class="ui-form-item ui-border-b">
            <label>
                User ID
            </label>
            <input id="username" type="text" name="username" onblur="checkUsername();">
            <span id="usernameTips"></span>
        </div>
        <div style="text-align: center;line-height: normal" class="ui-form-item ui-border-b">
            <label>
                New password
            </label>
            <input type="text" id="Psd" name="password" />
        </div>
        <div style="text-align: center;line-height: normal" class="ui-form-item ui-border-b">
            <label>
                Repeat password
            </label>
            <input type="text" name="repeatedPassword" id="repPsd" onblur="checkRepeated()" />
            <span id="tipsRepPsd"></span>
        </div>

        <div style="text-align: center;line-height: normal" class="ui-form-item ui-border-b">
            <label>
                CheckCode
                <input type="text" name="checkCode" size="5" maxlength="4" />
            </label>
            <a href="Register?type=Refresh"><img id="img" src=checkCode></a>
        </div>


        <%@ include file="detailAccountField.jsp"%>

        <div class="ui-btn-wrap">
            <button class="ui-btn-lg ui-btn-primary" type="submit" name="newAccount" value="Save Account Information">
                Save Account Information
            </button>
        </div>

    </form>
</div>

<%@ include file="../common/includeBottom.jsp"%>

